<template>
  <div ref='ec' :style="{height:height,width:width}"></div>
</template>

<script>
import echarts from "echarts"
import debounce from '@/utils/debounce'
export default {
  props: {
    width: {
      type: String,
      default: "100%"
    },
    height: {
      type: String,
      default: "100%"
    },
    type: {
      type: String,
      default: 'line'
    },
    selected: {
      type: Object,
      default: null
    },
    zoom: {
      type: Boolean,
      default: true
    },
    linedata: '',
    visualMap: {
      type: Number,
      default: 0
    },
    unit: {
      type: String,
      default: ''
    },
    ecdata: {
      type: Array,
      default: []
    }
  },
  data() {
    return {
      // color: [ "#FF5227", "#FF9200", "#0780ED", "#00AFC3","#0050E2",],
      color: ["#00AFC3", "#44D428", "#FF9200", "#B06EF3", "#68C4FD", "#FF5227", "#AE716E", "#0050E2", "#F6D159", "#911FA8"],
      // color: ['#CC0000', '#0066CC', '#00CCCC', '#990066', '#ea9914', '#e7600e', '#006633', '#ADCB13', '#0099FF', '#FFCC33', '#D39188', '#5c2a69', '#5DB85E', '#C40082', '#FF3703', '#D5353F', '#B699BD', '#a02024', '#dd6a24', '#cc3736'],
      chart: null
    }
  },
  computed: {
    origin() {
      return this.ecdata
    },
    opt() {

      let that = this
      let opt = {
        backgroundColor: "#FFF",
        color: this.color,
        quadraticIn: function (k) {
          return k * k
        },
        // 提示框组件
        tooltip: {
          // 触发类型
          trigger: "axis",
          // 提示框添加单位  默认无单位
          formatter(p) {
            var y_name = p[0].name
            p.forEach((item, index) => {
              if (index === that.origin.length) {
                return
              }
              y_name += `<p>${item.marker}${item.seriesName}：${
                item.value === undefined ? "-" : item.value
                } ${that.unit} </p>`
            })
            return y_name
          },
          // 鼠标悬浮到图上，可以出现标线和刻度文本。
          axisPointer: {
            type: 'cross',
            // 是否显示
            show: true,
            // 标线样式
            lineStyle: {
              // 线的类型 可选'solid' 'dashed''dotted'
              type: "dashed",
              // 线颜色
              color: "#000"
            },
            // 坐标轴指示器的文本标签。
            label: {
              // 是否显示
              show: true,
              // 文本颜色
              color: "#fff",
              // 指示器北京颜色
              backgroundColor: "rgba(7, 128, 237, 0.8)"
            }
          },
        },
        // 直角坐标系内绘图网格
        grid: {
          // grid 组件离容器左侧的距离。默认10%
          left: 80,
          // grid 组件离容器右侧的距离。默认10%
          right: 30,
          // grid 组件离容器下侧的距离。默认60px。值可以是像60这样的具体像素值，可以是像 '20%' 这样相对于容器高宽的百分比。
          bottom: this.zoom ? 80 : 20
        },
        toolbox: {
          show: true,
          feature: {
            dataView: { readOnly: false },
            // magicType: {type: ['line', 'bar','stack','tiled']},
            // magicType: {type: ['line', 'bar']},
            restore: {},
            saveAsImage: {}
          }
        },
        // 图例组件。
        legend: {
          type: 'scroll',
          // left:80,
          // 图例标记的图形宽度。默认25px
          itemWidth: 10,
          // 图例标记的图形高度。默认14px
          itemHeight: 2,
          // 图例的公用文本样式。
          textStyle: {
            // 文字颜色
            // color: "#000000",
            // 文字大小
            fontSize: "14"
          },
          selected: that.selected,
          // 图例的数据数组
          data: that.origin ? that.origin.map((item, index) => {
            return { name: item.name, icon: 'rect', textStyle: { color: that.color } }
          }) : []
        },
        // dataZoom 组件 用于区域缩放
        // dataZoom: [{
        //   type: 'slider',
        //   filterMode: 'weakFilter',
        //   showDataShadow: false,
        //   top: 400,
        //   height: 10,
        //   borderColor: 'transparent',
        //   backgroundColor: '#e2e2e2',
        //   handleIcon: 'M10.7,11.9H9.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4h1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7v-1.2h6.6z M13.3,22H6.7v-1.2h6.6z M13.3,19.6H6.7v-1.2h6.6z', // jshint ignore:line
        //   handleSize: 20,
        //   handleStyle: {
        //     shadowBlur: 6,
        //     shadowOffsetX: 1,
        //     shadowOffsetY: 2,
        //     shadowColor: '#aaa'
        //   },
        //   labelFormatter: ''
        // }, {
        //   type: 'inside',
        //   filterMode: 'weakFilter'
        // }],
        dataZoom: [
          // 滑动条型数据区域缩放组件
          {
            show: that.zoom,
            type: "slider",
            // 滚动条高度
            height: 40,
            // 滚动条近距离底部距离
            bottom: 0,
            // 数据窗口范围的起始百分比。范围是：0 ~ 100。表示 0% ~ 100%。默认0
            start: 0,
            // 数据窗口范围的结束百分比。范围是：0 ~ 100。默认100
            end: 100,
            // 手柄的样式配置
            handleStyle: {
              // 手柄颜色 默认#a7b7cc
              color: false
            },
            // 文字样式
            textStyle: {
              //  文字的颜色 默认#333
              color: false
            }
          },
          // 内置型数据区域缩放组件
          {
            type: "inside"
          }
        ],
        // 直角坐标系 grid 中的 x 轴，一般情况下单个 grid 组件最多只能放上下两个 x 轴，多于两个 x 轴需要通过配置 offset 属性防止同个位置多个 x 轴的重叠。
        xAxis: [
          {
            // 是否显示
            show: true,
            // 是否是脱离 0 值比例。设置成 true 后坐标刻度不会强制包含零刻度
            scale: true,
            // 坐标轴类型
            type: "category",
            // 坐标轴轴线相关设置
            axisLine: {
              // 坐标轴样式
              lineStyle: {
                // 坐标轴颜色
                // color: "#000000"
              }
            },
            // 坐标轴刻度相关设置
            axisTick: {
              // 是否显示坐标轴刻度
              show: false
            },

            // 坐标轴两边留白策略，类目轴和非类目轴的设置和表现不一样
            // boundaryGap: false,
            // 坐标轴刻度标签的相关设置
            axisLabel: {
              // 坐标轴刻度颜色
              // color: "#000000"
            },
            // 类目数据，在类目轴（type: 'category'）中有效
            data: that.origin[0] && that.origin[0].value ? that.origin[0].value.map((item, index) => {
              return item.time || item.date || item.dateTime || item.readTime
            }) : null
          }
        ],
        // 直角坐标系 grid 中的 y 轴，一般情况下单个 grid 组件最多只能放左右两个 y 轴，多于两个 y 轴需要通过配置 offset 属性防止同个位置多个 Y 轴的重叠。
        yAxis: [
          {
            // 坐标轴名称。
            name: that.unit,
            // 坐标轴名称的文字样式。
            nameTextStyle: {
              padding: [0, 30, 28, 0]
            },
            // 坐标轴类型
            type: "value",
            // 是否是脱离 0 值比例。设置成 true 后坐标刻度不会强制包含零刻度
            scale: true,
            // 坐标轴在 grid 区域中的分隔线
            splitLine: {
              // 是否显示
              show: false,
              lineStyle: {
                color: "#e5e5e5",
                //分隔线的类型 可选'solid' 'dashed''dotted'
                type: "dotted"
              }
            },
            // 坐标轴轴线相关设置。
            axisLine: {
              // 是否显示
              // show: true,
              lineStyle: {
                // 坐标轴线线的颜色。
                // color: "#000000"
                // 坐标轴线线的宽度
                // width: 1
                width: 0
              }
            },

            // 坐标轴刻度相关设置
            axisTick: {
              // 是否显示坐标轴刻度
              show: false
            }
          }
        ],
        visualMap: that.visualMap ? {
          top: 10,
          right: 10,
          pieces: [{
            lt: that.visualMap - 0.000001,
            color: '#DD3E5F'
          }, {
            gt: that.visualMap,
            color: '#44D428'
          }],
          show: false

        } : null,
        animationThreshold: 720,
        // 系列列表。每个系列通过 type 决定自己的图表类型
        series: that.origin ? that.origin.map((item, index) => {
          return {
            markLine: {
              symbol: "none",
              lineStyle: {
                normal: {
                  color: "#666",
                  type: "solid",
                  label: {
                    show: true
                  }
                }
              },
              data: that.linedata
            },


            // 折线/面积图
            type: that.type,
            // 系列名称，用于tooltip的显示，legend 的图例筛选，在 setOption 更新数据和配置项时用于指定对应的系列
            name: item.name,
            // 是否平滑曲线显示
            smooth: true,
            // 是否显示 symbol, 如果 false 则只有在 tooltip hover 的时候显示。
            showSymbol: false,
            // itemStyle: {
            //   normal: {
            //     color: 'rgb(103, 99, 99)',
            //     shadowBlur: 2,
            //     shadowColor: "rgba(0, 0, 0, .12)",
            //     shadowOffsetX: 2,
            //     shadowOffsetY: 2
            //   }
            // },
            lineStyle: {
              normal: {
                width: 2,
                shadowColor: 'rgba(0,0,0,0.28)',
                shadowBlur: 10,
                shadowOffsetX: 4,
                shadowOffsetY: 10
              }
            },
            // 区域填充样式
            // areaStyle: {
            //   normal: {
            //     color: new echarts.graphic.LinearGradient(
            //       0,
            //       0,
            //       0,
            //       1,
            //       [
            //         {
            //           offset: 0,
            //           color: this.r_color[index].a
            //         },
            //         {
            //           offset: 0.5,
            //           color: this.r_color[index].b
            //         },
            //         {
            //           offset: 1,
            //           color: "rgba(255, 255, 255, 0)"
            //         }
            //       ],
            //       false
            //     ),
            //     shadowColor: "rgba(0, 0, 0, 0.1)",
            //     shadowBlur: 10
            //   }
            // },
            // 系列中的数据内容数组。数组项通常为具体的数据项。
            data: item.value &&item.value.length ? item.value.map((item, index) => {
              return item.quantity || item.value || item.dateValue || item.useQuantity
            }) : []
          }
        }) : []
      }
      return opt
    }
  },
  watch: {
    origin() {
      this.chart.setOption(this.opt, true)
    }
  },
  mounted() {
    this.initChart()
    this.__resizeHanlder = debounce(() => {
      if (this.chart) {
        this.chart.resize()
      }
    }, 1)
    window.addEventListener('resize', this.__resizeHanlder)
    const mian = document.getElementById('mian')
    mian.addEventListener('transitionend', this.__resizeHanlder)
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    // window.removeEventListener('resize', this.__resizeHanlder)
    // const mian = document.getElementById('mian')
    // mian.removeEventListener('transitionend', this.__resizeHanlder)
    this.chart.dispose()
    this.chart = null
  },
  created() {
    // this.r_color = this.rgba_color(this.color)
  },
  methods: {
    initChart() {
      this.chart = echarts.init(this.$refs.ec)
      this.chart.setOption(this.opt)
    },
    // rgba_color(color) {
    //   var color_arr = []
    //   for (let i = 0; i < color.length ;i++) {
    //     let num = color[i].split("#")[1]
    //     color_arr.push({
    //       a: `rgba(${parseInt("0x" + num.substr(0, 2))},${parseInt(
    //         "0x" + num.substr(2, 2)
    //       )},${parseInt("0x" + num.substr(4, 2))},0.4)`,
    //       b: `rgba(${parseInt("0x" + num.substr(0, 2))},${parseInt(
    //         "0x" + num.substr(2, 2)
    //       )},${parseInt("0x" + num.substr(4, 2))},0.1)`
    //     })
    //   }
    //   return color_arr
    // }
  }

}
</script>
